import {
  Card,
  Table,
  Button,
  Space,
  Tag,
  Form,
  Input,
  Select,
  Tree,
  message,
  Modal,
} from 'antd';
import { useState, useEffect } from 'react';
import { getAdminApi, addAdminApi } from '@/api/admin';
import Drawer from './components/Drawer';

const treeData = [
  {
    title: '系统首页',
    key: '/',
  },
  {
    title: '轮播图管理',
    key: '/banner',
    children: [
      {
        title: '轮播图列表',
        key: '/banner/list',
      },
      {
        title: '新增轮播图',
        key: '/banner/add',
      },
    ],
  },
  {
    title: '产品管理',
    key: '/pro',
    children: [
      {
        title: '产品列表',
        key: '/pro/list',
      },
    ],
  },
];

const Index = () => {
  const columns = [
    {
      title: '管理员账号',
      dataIndex: 'adminname',
    },
    {
      title: '角色',
      dataIndex: 'role',
      render(role: number) {
        if (role === 1) {
          return <Tag color="magenta">管理员</Tag>;
        } else if (role === 2) {
          return <Tag color="green">超级管理员</Tag>;
        }
      },
    },
    {
      title: '操作',
      render(text: any, record: any) {
        return (
          <Space>
            <Button onClick={() => showModal(record)}>编辑</Button>
            <Button danger>删除</Button>
          </Space>
        );
      },
    },
  ];
  const [data, setData] = useState([]);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await getAdminApi();
    res && setData(res.data);
  };

  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  const onFinish = async (values: any) => {
    console.log('Success:', { ...values, checkedKeys: checkedKeys });
    const res = await addAdminApi({ ...values, checkedKeys: checkedKeys });
    if (res) {
      console.log(res);
      message.success('添加成功');
      setOpen(false);
      getData();
    }
  };

  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue: any) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  const [isModalOpen, setIsModalOpen] = useState(false);
  // const [modalData, setModalData] = useState({});
  const [form] = Form.useForm();

  const showModal = (record: any) => {
    console.log(record);
    setIsModalOpen(true);
    form.setFieldsValue(record);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Card>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          marginBottom: 20,
        }}
      >
        <Button onClick={showDrawer}>新增管理员</Button>
      </div>

      <Table dataSource={data} columns={columns} rowKey="adminid" />
      <Drawer title="新增管理员" open={open} onClose={onClose}>
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="adminname"
            rules={[
              { required: true, message: 'Please input your adminname!' },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="权限"
            name="role"
            rules={[{ required: true, message: 'Please choose your role!' }]}
          >
            <Select
              options={[
                { value: '2', label: '超级管理员' },
                { value: '1', label: '管理员' },
              ]}
            />
          </Form.Item>

          <Form.Item name="checkedKeys">
            <Tree
              checkable
              onExpand={onExpand}
              expandedKeys={expandedKeys}
              autoExpandParent={autoExpandParent}
              onCheck={onCheck}
              checkedKeys={checkedKeys}
              onSelect={onSelect}
              selectedKeys={selectedKeys}
              treeData={treeData}
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Drawer>

      <Modal
        title="编辑管理员"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="账号"
            name="adminname"
            rules={[
              { required: true, message: 'Please input your adminname!' },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="权限"
            name="role"
            rules={[{ required: true, message: 'Please choose your role!' }]}
          >
            <Select
              options={[
                { value: 2, label: '超级管理员' },
                { value: 1, label: '管理员' },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
};

export default Index;
